<template>
    <div class="version-tab-wrap">
        <div class="page-wrap">
            <div class="table-header-wrap">
                <flexbox justify="space-between" align="center" class="table-header-cont">
                    <a-radio-group v-model:value="selectedValue" button-style="solid">
                        <a-radio-button :value="item.value" v-for="item of radioOptions" :key="item.value"> {{ item.name }} </a-radio-button>
                    </a-radio-group>
                </flexbox>
                <div style="min-height: 400px">
                    <component :is="comName" v-bind="$attrs" />
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import RelativeAsset from './RelativeAsset/index.vue';
import RelativeVersion from './RelativeVersion/index.vue';
import { defineComponent, reactive, toRefs, computed } from 'vue';
export default defineComponent({
    name: 'MyRequire',
    components: {
        RelativeAsset,
        RelativeVersion
    },
    setup() {
        const state = reactive<any>({
            selectedValue: 0,
            radioOptions: [
                {
                    name: '版本',
                    value: 0
                },
                {
                    name: '资产',
                    value: 1
                }
            ]
        });
        const comName = computed(() => {
            return ['RelativeVersion', 'RelativeAsset'][state.selectedValue];
        });
        return {
            ...toRefs(state),
            comName
        };
    }
});
</script>
<style scoped lang="less">
.version-tab-wrap {
    padding: 24px 0 0 0;
    background: #f0f2f5;
    .page-wrap {
        min-height: 100%;
        padding: 24px;
        background: #fff;
    }
}
</style>